<!--TODO: 用户管理个人信息的页面 -->
<template>
  <div class="app-container">
    <div>
        <el-row>
            <el-col :span="16" v-for="term in personalInfo" :key="term.id" :offset="1" align="middle">
                <el-card class="box-card; card-background" shadow="always" style="margin-top: 15px;margin-left: 250px" >
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">修改</el-button>
                    </div>
                    <div>
                        <el-form label-position="left" >
                            <el-form-item label="学生id:">
                                <span>{{term.studentId}}</span>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="姓名:">
                                <span>{{term.name}}</span>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="性别：">
                                <span>{{term.sex?"女":"男"}}</span>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="住址：">
                                <span>{{term.address}}</span>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="QQ：">
                                <span>{{term.qq}}</span>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="电话：">
                                <span>{{term.tel}}</span>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog title="表单弹框" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.sex">
                        <el-radio :label="false">男</el-radio>
                        <el-radio :label="true">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                    <el-input v-model="form.qq"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitCancel">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
  </div>
</template>

<script>

import {getToken} from "../../../utils/auth";
import {getUserStudentByUsername, modifyStudent} from "../../../api/student";

export default {
    name: "GroupUpload",
    data() {
        return {
            personalInfo: [],
            fileList: [],
            dialogVisible:false,
            username: localStorage.getItem('username'),
            form: {
                name: '',
                sex: '',
                address: '',
                qq: '',
                tel: ''
            },
            headers: {
                'token': getToken(),
            },

        };
    },
    created() {
        getUserStudentByUsername(this.username).then(res => {
            this.personalInfo = res.data.list;
        })

    },
    methods: {
        onSubmit() {
            this.dialogVisible = false
            console.log('submit!');
            console.log(this.form);
            console.log(this.personalInfo);
            console.log(this.personalInfo[0].studentId);
            modifyStudent(
                this.personalInfo[0].studentId,
                this.form.name,
                this.form.sex,
                this.form.address,
                this.form.qq,
                this.form.tel
            ).then(res0 =>{
                    getUserStudentByUsername(this.username).then(res => {
                        this.personalInfo = res.data.list;
                    })
                    this.$forceUpdate();
                    this.$message({
                        message: '修改信息成功',
                        type: 'success',
                        center: true
                    });
                }
            )
        },
        submitCancel(){
            this.dialogVisible = false,
            this.form.name = '',
            this.form.sex = null,
            this.form.address = '',
            this.form.qq = '',
            this.form.tel = ''
        }

    }
}
</script>

<style scoped>

</style>
